﻿
@{
    ViewData["Title"] = "FormWizard";
}

<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Form Wizard</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Form Components</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Form Wizard</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="alert alert-primary" role="alert">
                                    <p>Use our extra helper file for quick setup Form Components in your page - <a href="index-form-package.html" target="_blank" class="alert-link">CHECKOUT</a></p>
                                    <label class="text-muted">Copy/paste source code in your page in just couples of seconds.</label>
                                </div>
                            </div>
                            <!-- [ Smart-Wizard ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Smart Wizard</h5>
                                    </div>
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col-12 col-md-6">
                                                <!-- [ External toolbar sample ] start -->
                                                <h5>Theme:</h5>
                                                <select id="theme_selector" class="form-control custom-select col-lg-6 col-sm-12">
                                                    <option value="default">default</option>
                                                    <option value="arrows">arrows</option>
                                                    <option value="dots">dots</option>
                                                </select>
                                                <!-- [ External toolbar sample ] End -->
                                            </div>
                                        </div>
                                        <!-- [ SmartWizard html ] start -->
                                        <div id="smartwizard">
                                            <ul>
                                                <li>
                                                    <a href="#step-1">
                                                        <h6>Step 1</h6>
                                                        <p class="m-0">This is step description</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-2">
                                                        <h6>Step 2</h6>
                                                        <p class="m-0">This is step content</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-3">
                                                        <h6>Step 3</h6>
                                                        <p class="m-0">This is step text</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-4">
                                                        <h6>Step 4</h6>
                                                        <p class="m-0">This is step content</p>
                                                    </a>
                                                </li>
                                            </ul>
                                            <div>
                                                <div id="step-1">
                                                    <h5>Title Step 1</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-2">
                                                    <h5>Title Step 2</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-3">
                                                    <h5>Title Step 3</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-4">
                                                    <h5>Title Step 4</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Smart-Wizard ] end -->
                            <!-- [ Wizard-Vartical-Left ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Smart Wizard [ Vertical Left ]</h5>
                                    </div>
                                    <div class="card-block">
                                        <div id="smartwizard-left" class="sw-vertical-left">
                                            <ul>
                                                <li>
                                                    <a href="#step-l-1">
                                                        <h6>Step 1</h6>
                                                        <p class="m-0">This is step description</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-l-2">
                                                        <h6>Step 2</h6>
                                                        <p class="m-0">This is step content</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-l-3">
                                                        <h6>Step 3</h6>
                                                        <p class="m-0">This is step text</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-l-4">
                                                        <h6>Step 4</h6>
                                                        <p class="m-0">This is step content</p>
                                                    </a>
                                                </li>
                                            </ul>
                                            <div>
                                                <div id="step-l-1">
                                                    <h5>Title Step 1</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-l-2">
                                                    <h5>Title Step 2</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-l-3">
                                                    <h5>Title Step 3</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-l-4">
                                                    <h5>Title Step 4</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Wizard-Vartical-Left ] end -->
                            <!-- [ Wizard-Vartical-Right ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Smart Wizard [ Vertical Right ]</h5>
                                    </div>
                                    <div class="card-block">
                                        <div id="smartwizard-right" class="sw-vertical-right">
                                            <div>
                                                <div id="step-r-1">
                                                    <h5>Title Step 1</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-r-2">
                                                    <h5>Title Step 2</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-r-3">
                                                    <h5>Title Step 3</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                                <div id="step-r-4">
                                                    <h5>Title Step 4</h5>
                                                    <hr>
                                                    <h6>Sub title 1</h6>
                                                    <p>
                                                        <strong>@@Title content 1!.. </strong> Lorem Ipsum is simply dummy text of the printing <strong>@@Content content 1 </strong> and typesetting industry. Lorem Ipsum has been the industry's
                                                        standard dummy text.
                                                    </p>
                                                    <h6 class="mt-3">Sub title 2</h6>
                                                    <p><strong>@@Title content 2!.. </strong> Lorem Ipsum is simply dummy text and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                                                </div>
                                            </div>
                                            <ul>
                                                <li>
                                                    <a href="#step-r-1">
                                                        <h6>Step 1</h6>
                                                        <p class="m-0">This is step description</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-r-2">
                                                        <h6>Step 2</h6>
                                                        <p class="m-0">This is step content</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-r-3">
                                                        <h6>Step 3</h6>
                                                        <p class="m-0">This is step text</p>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#step-r-4">
                                                        <h6>Step 4</h6>
                                                        <p class="m-0">This is step content</p>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Wizard-Vartical-Right ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->

@section Styles{
    <!-- Smart Wizard css -->
    <link rel="stylesheet" href="~/assets/plugins/smart-wizard/css/smart_wizard.min.css">
    <link rel="stylesheet" href="~/assets/plugins/smart-wizard/css/smart_wizard_theme_arrows.min.css">
    <link rel="stylesheet" href="~/assets/plugins/smart-wizard/css/smart_wizard_theme_circles.min.css">
    <link rel="stylesheet" href="~/assets/plugins/smart-wizard/css/smart_wizard_theme_dots.min.css">
}

@section Scripts{
    <!-- Smart Wizard Js -->
    <script src="~/assets/plugins/smart-wizard/js/jquery.smartWizard.min.js"></script>
    <script src="~/assets/js/pages/wizard-custom.js"></script>
}

